<template>
  <div class="numberPad">
    <div class="output">
      <span>{{output}}</span>
      <span @click="clear" class="iconWrapper">
        <Icon name='clear' class="clearNum" :style="'visibility:'+`${isShow}`"></Icon>
      </span>
    </div>
    <div class="buttons">
      <button @click="inputContent">1</button>
      <button @click="inputContent">2</button>
      <button @click="inputContent">3</button>
      <button @click="deleteNum" class="delete">
        <Icon name="delete"></Icon>
      </button>
      <button @click="inputContent">4</button>
      <button @click="inputContent">5</button>
      <button @click="inputContent">6</button>
      <button @click="inputContent">7</button>
      <button @click="inputContent">8</button>
      <button @click="inputContent">9</button>
      <button class="ok" @click="ok">完成</button>
      <button @click="inputContent">.</button>
      <button class="zero" @click="inputContent">0</button>
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component, Prop} from 'vue-property-decorator';

  @Component
  export default class NumberPad extends Vue {
    @Prop(Number) readonly amount!: number;

    output = this.amount.toString();
    isShow = 'visible';

    inputContent(event: MouseEvent) {
      this.isShow = 'visible';
      const button = (event.target as HTMLButtonElement);
      const input = button.textContent as string;
      if (this.output.length === 8) return;
      if (this.output === '0') {
        if ('0123456789'.indexOf(input) >= 0) {
          this.output = input;
        } else {
          this.output += input;
        }
        return;
      }
      if (this.output.indexOf('.') >= 0 && input === '.') return;
      if (this.output.indexOf('.') >=0 && this.output.length-this.output.indexOf('.')>2 ) return;
      this.output += input;
    }

    deleteNum() {
      if (this.output.length === 1) {
        this.output = '0';
      } else {
        this.output = this.output.slice(0, -1);
      }
    }

    clear() {
      this.output = '0';
      this.isShow = 'hidden';
    }

    ok() {
      const num = parseFloat(this.output);
      this.$emit('update:amount', num);
      this.$emit('submit', num);
      this.output = '0';
    }
  }
</script>

<style scoped lang="scss">
  @import "~@/assets/style/helper.scss";

  .numberPad {

    .output {
      text-align: right;
      font-size: 24px;
      line-height: 60px;
      font-family: Consolas, monospace;
      background: #F0EFF4;
      border: 1px solid #D5D5D5;


      > .iconWrapper {
        width: 1em;
        height: 1em;

        > .clearNum {
          padding: 5px;
        }
      }
    }

    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 25%);
      grid-template-rows: repeat(4, 56px);
      background: #F0EFF4;
      padding: 6px 10px;

      > button {
        font-size: 22px;
        background: #F3F3F3;
        margin: 3px;
        border: 1px solid #CACACA;
      }

      %operate {
        grid-column-start: 4;
        grid-column-end: 5;
      }

      & .delete {
        background: #C7C7C7;
        grid-row-start: 1;
        grid-row-end: 3;
        @extend %operate;
      }

      & .ok {
        color: white;
        font-size: 20px;
        font-weight: lighter;
        background: #1671CE;
        grid-row-start: 3;
        grid-row-end: 5;
        @extend %operate;
      }

      & .zero {
        grid-column-start: 2;
        grid-column-end: 4;
      }
    }
  }
</style>